<template>
  <div class="register-container">
    <el-tabs v-model="activeName" stretch class="demo-tabs h-full" @tab-click="handleClick">
      <!-- <el-tab-pane label="个人账号注册" name="self">
        <self-register
          ref="selfRegisterRef"
          @register="emit('register')"
          @registerSuccess="emit('registerSuccess')"
        />
      </el-tab-pane> -->
      <el-tab-pane label="公司入驻申请" name="company">
        <company-register
          ref="companyRegisterRef"
          @register="emit('register')"
          @registerSuccess="emit('registerSuccess')"
        />
      </el-tab-pane>
    </el-tabs>
  </div>
</template>

<script lang="ts" setup>
import { ref } from "vue";
import type { TabsPaneContext } from "element-plus";
import CompanyRegister from "./modules/CompanyRegister.vue";
import SelfRegister from "./modules/SelfRegister.vue";
const activeName = ref("company");
const emit = defineEmits(["register", "registerSuccess"]);
const handleClick = (tab: TabsPaneContext, event: Event) => {
  console.log(tab, event);
};
</script>

<style lang="scss">
.register-container {
  width: 80%;
  height: 100%;
  margin-bottom: 40px;
  .el-tab-pane {
    height: 100%;
  }
}
</style>
